<script setup lang="ts">
import {onMounted} from 'vue'
import router from '@/router/index'
import {getRoutesByAuth} from '@/util/router'
import useUser from '@/store/user'
import useNav from '@/store/nav'

import Aside from './aside.vue'
import Header from './header.vue'
import Main from './main.vue'

const user = useUser.setup().store
const nav = useNav.setup().store

const init = () => {
  nav.navLoading = true
  //初始化用户路由相关信息
  getRoutesByAuth()
}

onMounted(() => {
  if (!user.token) return router.push({name: 'Login'})
  init()
})
</script>

<template>
  <el-container class="home-container">
    <Aside />
    <el-container class="content-wrapper">
      <Header />
      <Main v-loading="nav.navLoading" />
    </el-container>
  </el-container>
</template>

<style scoped>
.home-container {
  height: 100%;
  width: 100%;
  --header-height: 48px;
}
.content-wrapper {
  flex-direction: column;
  flex: 1;
}
</style>
